import React from 'react'
import PropTypes from 'prop-types'

export default class Life extends React.Component {
  static propTypes = {
    count: PropTypes.number
  }
  static defaultProps = {
    count: 99
  }

  constructor(props) {
    super()
    this.state = {
      msg: '我是信息',
      num: props.count
    }
  }

  componentWillMount() {   // created
    // console.log(1111, this.state.msg, this.props.count)
    // this.testFn()
  }

  render() {
    // console.log(22222,  document.getElementById('test') && document.getElementById('test').innerHTML  )
    return <div>
      <input type="button" value="add" onClick={ () => this.numAdd() }/>
      <div id="test">您传过来的值： {this.state.num} --- {this.props.count}</div>
    </div>
  }

  componentDidMount() {     // mounted
    // console.log( document.getElementById('test').innerHTML )
  }

  shouldComponentUpdate(props, states) {
    return true
  }

  componentWillUpdate() {
    // console.log('componentWillUpdate', document.getElementById('test').innerHTML)
  }

  componentDidUpdate() {
    // console.log('componentDidUpdate', document.getElementById('test').innerHTML)
  }

  componentWillReceiveProps(props) {
    console.log('我的父元素更新了', props.count)

    this.setState({
      num: props.count
    })
  }

  // render(){}

  testFn = () => {
    console.log('你调用了我')
  }

  numAdd = () => {
    this.setState({
      num: this.state.num + 1
    })
  }
}























// Life.propTypes = {
//   count: PropTypes.string.isRequired
// }
// Life.defaultProps = {
//   count: 99
// }
